(function( $ ) {
    $.fn.extend({
    	iphoneSelect: function(options) {
            return this.each(function() {
            	var defaults = {
            		options_text : ['geen optie'],
            		options_val : [''],
            		options_selected : [false]
            	};
            	var options = $.extend(defaults, options);
            	
                var obj = $(this);
                var all_options = obj.find("option").toArray();
                options.options_text = [];
                options.options_val = [];
                options.options_selected = [];
                for(var i = 0; i < all_options.length; i++) {
                	options.options_text[i] = $(all_options[i]).text();
                	options.options_val[i] = $(all_options[i]).val();
                	options.options_selected[i] = $(all_options[i]).is(':checked');
                }
                console.log(obj);
                
                // Create het small element
                var small_object = $('<small/>', {
                    rel: obj.find(":selected").val(),
                    text: obj.find(":selected").text()
                });
                obj.parent().prepend(small_object);
                
                obj.hide();
                
                obj.parent().click(function() {
                	// Maak de iphoneSelect div leeg
                	$("#iphoneSelect").empty();
                	// Voeg de unorded list toe
                	var append = "<ul class=\"iphoneSelect_list\">";
                	//Vraag op welke waarde is geselecteerd vanuit de select tag
                	var options_selected = obj.find("option:selected").text();
                	
                	for(var i = 0; i < options.options_text.length; i++) {
                		append += "<li " + (options.options_text[i] == options_selected ? "class=\"iphoneSelected\"" : "") + "rel=\"" + options.options_val[i] + "\">" + options.options_text[i] + "</li>";
        			}
                	append += "</ul>";
                	$("#iphoneSelect").append(append);
                	$("#iphoneSelect li").click(function() {
                		//Haal de tekst op en zet deze in de small
                		var option_text = $(this).text();
                		small_object.html(option_text);
                		
                		//Zorg er voor dat de select tag de goede waarde krijgt
                		obj.find("option").attr('selected', false);
                		obj.find("option").filter(function() {
                		    //may want to use $.trim in here
                		    return $(this).text() == option_text; 
                		}).attr('selected', true);
                		
                		$("#iphoneSelect").hide();
                	});
                	
                	$("#iphoneSelect").show();
				});
            });
    	}
    });
})( jQuery );

$(document).ready(function() {
	$("body").append("<div id=\"iphoneSelect\"></div>");
});